<template>
    <!-- 文案提取记录 -->
    <div class="personal-info">
    <h2>配音记录</h2>
      <!-- 第1行：数据表格 -->
      <el-row>
        <el-col :span="24">
          <!-- 配音记录表格，设置了一些样式以使表格居中且有清晰的结构 -->
          <el-table :data="tableData" class="custom-table" :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" :row-style="{ borderBottom: '1px solid #ebeef5' }">
            <!-- 日期列 -->
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <!-- 配音员列 -->
            <el-table-column prop="voiceActor" label="配音员" width="180"></el-table-column>
            <!-- 内容列 -->
            <el-table-column prop="content" label="内容"></el-table-column>
            <!-- 操作列，包含对记录的操作按钮 -->
            <el-table-column label="操作" width="250">
              <template #default="scope">
                <el-row>
                  <!-- 编辑按钮 -->
                  <el-col :span="6">
                    <el-button size="mini" link type="warning" @click="handleEdit(scope.$index, scope.row)">重新编辑</el-button>
                  </el-col>
                  <!-- 试听按钮 -->
                  <el-col :span="6">
                    <el-button size="mini" link type="primary" @click="handleListen(scope.$index, scope.row)">试听</el-button>
                  </el-col>
                  <!-- 下载按钮 -->
                  <el-col :span="6">
                    <el-button size="mini" link type="success" @click="handleDownload(scope.$index, scope.row)">下载</el-button>
                  </el-col>
                  <!-- 删除按钮 -->
                  <el-col :span="6">
                    <el-button size="mini" link type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!-- 第2行：分页组件 -->
      <el-row>
        <el-col :span="24" class="pagination-container">
          <!-- 分页器，用于处理大量数据的分页显示 -->
          <div class="pagination-wrapper">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="pageSize"
              @current-change="handlePageChange"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script lang="ts">
  export default {
    name: 'DubbingRecord'
  }
  </script>

  <script setup lang="ts">
import { ref, reactive } from 'vue';
// 从 Vue 中导入 ref 和 reactive 函数，用于创建响应式的数据
import { ElMessage } from 'element-plus';
// 从 element-plus 中导入 ElMessage 组件，用于显示全局消息提示
// 导入 Axios 用于发送 HTTP 请求
import axios from 'axios';
// 导入 Vue Router 的钩子用于路由导航和控制
import { useRouter, useRoute } from 'vue-router';  
// 导入自定义类型定义
import { VoiceActor, IAudioRecord, AudioRecord, GetBaseURL } from '../../composables/types';
  
// 接口地址
const baseUrl: string = GetBaseURL();
// 路由相关
const router = useRouter();
const route = useRoute();

  // 分页参数
  const total = ref(100); // 总条数
  const pageSize = ref(10); // 每页显示条数

  // 表格数据，存储配音记录
  const tableData = reactive([
    {id:1, date: '2023-01-01', voiceActor: '张三', content: '这是第一条配音记录' },
    {id:2, date: '2023-01-02', voiceActor: '李四', content: '这是第二条配音记录' },
    // 更多数据...
  ]);
  
  // 编辑操作方法
  const handleEdit = (index, row) => {
      // 转到配音制作页面
      router.push({ name: "ProductionPageDubbing", params: { audioId: row.id } })

    ElMessage('跳转到配音制作页面并且传入当前记录');
    console.log('编辑:', index, row);
  };
  
  // 试听操作方法
  const handleListen = (index, row) => {
    console.log('试听:', index, row);
  };
  
  // 下载操作方法
  const handleDownload = (index, row) => {
    console.log('下载:', index, row);
  };
  
  // 删除操作方法
  const handleDelete = (index, row) => {
    console.log('删除:', index, row);
  };
  
  // 分页变化处理方法
  const handlePageChange = (page) => {
    console.log('当前页:', page);
  };
  </script>
  
  <style scoped>
  .custom-table {
    width: 100%;
  }
  
  .pagination-container {
    text-align: center;
    margin-top: 20px;
  }
  
  .pagination-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  </style>